<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>2</h1>
    <!-- <div>
        aaa 
        bbb
    </div> -->

    <ul>
        <li>22</li>
        <li>22</li>
    </ul>
    <script>
        /*
            一般实现网页里面的CRUD
                 原生js有两种方法
                    1- 拼字符串 替换原来的内容 innerHTML
                         见 周末留言版的作业
                    2-  添加一个数据--创建div对象对象--添加方法
                        删除一个数据--找到要删除的div对象--调用删除方法
                        替换--

                        创建文本
                            document.createTextNode(文本内容)
                        创建元素
                            document.createElement(标签名)
                        添加元素
                            父元素.appendChild(子元素)  （父元素的尾部添加）
                            父元素.insertBefore(新的节点，参照元素)  任意元素的前面插入
                        删除元素    
                             父元素.removeChild(子元素) --删除父元素中一个子元素
                             元素.remove() 删除元素
                        替换元素
                             父元素.repalceChild(子元素) --
                             document.body.replaceChild(新的节点，被替换的节点)


        */

        // 1-创建给元素对象
        // var div = document.createElement('标签名')
        // 参数：标签名
        // 返回；返回创建的dom对象
        var div = document.createElement('div');
        // 设置文本
        div.innerText = 'aa'
        console.log(div);

        // 2-创建文本对象
        // 参数是文本内容
        // 返回 文本对象
        var text = document.createTextNode('hello world');

        // 3-元素中添加子节点(尾部添加)
        // 父节点.appendChild(孩子节点)
        //div节点中添加了一个文本节点
        div.appendChild(text);
        console.log(div);

        // innerHTML 使用后面的字符串 覆盖原来的标签里面的内容
        // div.innerHTML = 'bb';

        // 4-div 添加到body中
        // body中添加子节点
        // document.body.appendChild(div)


        // 5-删除
        var h1 = document.querySelector('h1');

        // 通过父元素 删除子元素
        // document.body.removeChild(h1)
        // 直接删除这个元素
        // h1.remove()

        // 替换

        var h2 = document.createElement("h2");
        h2.innerHTML = 'aabb';

        // document.body.replaceChild(新的节点，被替换的节点)
        // document.body.replaceChild(h2, h1)


        // 插入
        // 在一个元素前面插入一个另一个元素
        document.body.insertBefore(h2, h1);







    </script>

</body>

</html>